<!DOCTYPE html>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-route.min.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap/bootstrap.css" />
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页显示</title>
</head>
<body ng-app="paginationApp" ng-controller="paginationCtrl" >
    <table class="table table-bordered table-hover">
        <tr>
            <th>序号</th>
            <th>商品编号</th>
            <th>名称</th>
            <th>价格</th>
        </tr>
        <tr ng-repeat="product in products">
            <td>{{$index+1}}</td>
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
        </tr>
    </table>
    <div>
        <ul class="pagination pull-right">
            <li>
                <a href="" ng-click="prev()">上一页</a>
            </li>
            <li ng-repeat="page in pageList" ng-class={"active":isActivePage(page)}>    <!--active属性是true/false由方法返回值决定-->
                <!--pageList数组遍历,得到分页页码,给页码添加点击事件,传送当前页到js代码中处理-->
                <a href="" ng-click="selectPage(page)">{{page}}</a>
            </li>
            <li>
                <a href="" ng-click="next()">下一页</a>
            </li>
        </ul>
    </div>

</body>
</html>
<script>
    var app = angular.module("paginationApp", []);
    app.controller("paginationCtrl", ["$scope", "$http", function($scope, $http) {
        $scope.currentPage = 1;  // 当前页
        $scope.pageSize = 2;     // 当前最多显示的记录数
        $scope.totalCount = 0;   // 总记录数
        $scope.totalPages = 0;   // 总页数

        // 上一页
        $scope.prev = function() {
            if($scope.currentPage > 1) {
                $scope.selectPage($scope.currentPage - 1);
            }
        }

        // 下一页
        $scope.next = function() {
            if($scope.currentPage < $scope.totalPages) {
                $scope.selectPage($scope.currentPage + 1);
            }
        }

        // 选中当前页的操作（传递当前页）
        $scope.selectPage = function(page) {
            // 如果页码超出范围
            if($scope.totalPages != 0) {
                if(page < 1 || page > $scope.totalPages) return;
            }

            $http({
                method: 'GET',
                // 后续url：action,//在action中返回json的数据
                url: './6_' + page + '.json',
                // 分页操作，传递“当前页”，传递“当前页最多显示的记录数”
                params: {
                    "page": page,
                    "pageSize": $scope.pageSize
                }
            }).success(function(data, status, headers, config) {
                // 显示表格数据
                $scope.products = data.products;
                // 计算总页数
                $scope.totalCount = data.totalCount;
                // 计算总页数（Math.ceil()是常见编程语言中的常用代码，用于向上取整数计算，返回的是大于或等于函数参数的数值。）
                $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);

                // 当前显示页，设为当前页
                $scope.currentPage = page;

                // 固定显示10页 (前5后4),当前页数要能变动
                var begin;
                var end;

                begin = page - 5;
                if(begin < 0) {
                    begin = 1;
                }

                end = begin + 9;
                if(end > $scope.totalPages) {
                    end = $scope.totalPages;
                }

                begin = end - 9;
                if(begin < 1) {
                    begin = 1;
                }
                //把这些页码放入自定义数组pageList中,然后在body标签中取遍历数组
                $scope.pageList = new Array();
                for(var i = begin; i <= end; i++) {
                    $scope.pageList.push(i);
                }

            }).error(function(data, status, headers, config) {
                // 当响应以错误状态返回时调用
                alert("出错，请联系管理员 ");
            });
        }

        //选中页码高亮显示
        $scope.isActivePage = function(page) {
            return page == $scope.currentPage;
        }

        // 发起请求 显示第一页数据 (刚进入页面的时候，默认显示第一页的内容)
        $scope.selectPage($scope.currentPage);
    }])
</script>